import 'package:childrenapp/buy.dart';
import 'package:childrenapp/favorite.dart';
import 'package:childrenapp/home_page.dart';
import 'package:flutter/material.dart';

class Details extends StatefulWidget {
  const Details({super.key});

  @override
  State<Details> createState() => _DetailsState();
}

class _DetailsState extends State<Details> {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Container(
        child: Stack(children: [
          Container(
            // alignment: Alignment.topCenter,

            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                        'images/Image/full-length-portrait-cute-little-kid-boy-stylish-jeans-clothes-smiling-standing-white-kids-fashion-concept 1.png'),
                    fit: BoxFit.cover)),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return Home_Page();
                  }));
                },
                child: Container(
                  margin: EdgeInsets.only(
                    left: 20,
                    top: 60,
                  ),
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(245, 245, 245, 1.0),
                      borderRadius: BorderRadius.circular(20)),
                  child: const Center(
                    child: Image(
                      image: AssetImage(
                        'images/Icon/Arrow - Left 3.png',
                      ),
                      width: 30,
                      height: 30,
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                  right: 20,
                  top: 60,
                ),
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                    color: Color.fromRGBO(245, 245, 245, 1.0),
                    borderRadius: BorderRadius.circular(20)),
                child: const Center(
                  child: Image(
                    image: AssetImage(
                      'images/Icon/more vertical.png',
                    ),
                    width: 30,
                    height: 30,
                  ),
                ),
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
              width: screenWidth,
              height: 400,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30),
                  topRight: Radius.circular(30),
                ),
              ),
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Warm Jeans Shirs',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            child: Text(
                              '\$14.00',
                              style: TextStyle(
                                fontSize: 24,
                                fontWeight: FontWeight.w800,
                              ),
                            ),
                          ),
                          Container(
                            height: 22,
                            width: 80,
                            color: Color.fromRGBO(245, 245, 245, 1.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  child: Image(
                                    image: AssetImage('images/Icon/Star.png'),
                                  ),
                                ),
                                Container(
                                  child: Text('4.9'),
                                ),
                                Container(
                                  child: Text(
                                    '(70)',
                                    style: TextStyle(
                                      color: Color.fromRGBO(142, 142, 142, 1.0),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Row(
                        children: [
                          Container(
                            // color: Colors.black,
                            width: 95,
                            child: Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(bottom: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Text('Color'),
                                ),
                                Container(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        height: 30,
                                        width: 30,
                                        decoration: BoxDecoration(
                                            color: Colors.white,
                                            borderRadius:
                                                BorderRadius.circular(15),
                                            border: Border.all(
                                              color: Colors.black,
                                              width: 5,
                                            )),
                                      ),
                                      Container(
                                        height: 20,
                                        width: 20,
                                        decoration: BoxDecoration(
                                          color:
                                              Color.fromRGBO(113, 103, 73, 1.0),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                      ),
                                      Container(
                                        height: 20,
                                        width: 20,
                                        decoration: BoxDecoration(
                                          color: Color.fromRGBO(
                                              223, 192, 146, 1.0),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            width: 100,
                          ),
                          Container(
                            // color: Colors.black,
                            width: 95,
                            child: Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(bottom: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Text('Size'),
                                ),
                                Container(
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                        height: 30,
                                        width: 30,
                                        decoration: BoxDecoration(
                                          color: Color.fromRGBO(
                                              245, 245, 245, 1.0),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        child: Center(child: Text('S')),
                                      ),
                                      Container(
                                        height: 30,
                                        width: 30,
                                        decoration: BoxDecoration(
                                          color:
                                              Color.fromRGBO(51, 51, 51, 1.0),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        child: Center(
                                            child: Text(
                                          'M',
                                          style: TextStyle(color: Colors.white),
                                        )),
                                      ),
                                      Container(
                                        height: 30,
                                        width: 30,
                                        decoration: BoxDecoration(
                                          color: Color.fromRGBO(
                                              245, 245, 245, 1.0),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        child: Center(child: Text('L')),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                        alignment: Alignment.centerLeft,
                        child: Row(
                          children: [
                            Container(
                              child: Text(
                                'Descrition',
                                style: TextStyle(
                                  decoration: TextDecoration.underline,
                                ),
                              ),
                            ),
                            SizedBox(
                              width: 40,
                            ),
                            Container(
                              child: Text('Review'),
                            ),
                          ],
                        )
                        // color: Colors.black,
                        ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'Lorem Ipsum is simply dummy text of the printing and \n typesetting industry.',
                        style: TextStyle(
                          fontSize: 12,
                          color: Color.fromRGBO(205, 205, 205, 1.0),
                        ),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            height: 50,
                            width: 50,
                            child: Center(
                              child: Image(
                                image: AssetImage('images/Icon/Heart.png'),
                                width: 20,
                                height: 20,
                              ),
                            ),
                            decoration: BoxDecoration(
                                color: Color.fromRGBO(245, 245, 245, 1.0),
                                borderRadius: BorderRadius.circular(10)),
                          ),
                          Container(
                            height: 50,
                            width: 300,
                            child: ElevatedButton(
                              onPressed: () {
                                Navigator.push(context,
                                    MaterialPageRoute(builder: (context) {
                                  return Buy();
                                }));
                              },
                              child: Text(
                                'Add to Card',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 18),
                              ),
                              style: ButtonStyle(
                                shape: MaterialStateProperty.all(
                                    RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(15))),
                                backgroundColor: MaterialStateProperty.all(
                                  Color.fromRGBO(51, 51, 51, 1.0),
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          )
        ]),
      ),
    );
  }
}
